<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js_test</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="./js/main.js" type="text/javascript"></script>
    <style>
        .hello{
            color: #778899;
        }
    </style>
</head>
<body>
    <div>
        <p>==== js test ====</p>
        <p>
        <form action="javascript:void(0);" id="myForm">
        <input type="text" value="11" id="userId" class="aaa" name="myId">
        <input type="text" value="Duncan" id="userName" name="userName">
        <input type="date" id="createDate" name="createDate">
        <input type="button" value="提交" id="mySubmit">
    </form>
        </p>
        <p>
            <a href="javascript:void(0);">enter</a>
            <span id="ddd" class="hello">no body cares</span>
<!--            <input type="text" value="11" id="userId" class="aaa" name="myId" onchange="jsBaseTest4()"/>-->
            <div id="myDiv">
                <h1>Test</h1>
            </div>
        </p>
        <p>
            <input type="radio" value="man" name="gender" id="manRadio">man
            <input type="radio" value="woman" name="gender" id="womanRadio">woman
        </p>
       <p><input type="button" name="bbbz" value="jsBaseTest1" id="jsBase1" />
           <input type="button" value="jsBaseTest2" id="jsBase2" name="cbb" />
           <input type="button" value="jsBaseTest3" id="jsBase3" name="bbbe">
           <input type="button" value="jsBaseTest4" id="jsBase4" name="aaa">
           <input type="button" value="jsBaseTest5" id="jsBase5" name="aaa" onclick="jsBaseTest5()">
           <input type="button" value="jsBaseTest6" id="jsBase6" name="aaa">
       </p>



    </div>
    <script>
        $(function (){
           $("#jsBase1").bind("click", function (){
               jsBaseTest1();
           });
           $("#jsBase2").bind("click", function (){
                jsBaseTest2();
            });
            $("#jsBase3").bind("click", function (){
                jsBaseTest3();
            });
            $("#jsBase4").bind("click", function (){
                jsBaseTest4();
            });
            $("#mySubmit").bind("click", function (){
                submitForm();
            });
            $("#jsBase6").click(function (){
                jsBaseTest5();
            });
        });
        //js code

        const version = "1.0";
        function submitForm(){
            console.log($("#myForm").serialize());
            const user = {};
            user.userId = $("#userId").val();
            user.userName = $("#userName").val();
            user.createDate= $("#createDate").val();
            console.log(JSON.stringify(user));
        }
        function jsBaseTest5(){
            //jQuery 数据处理
            console.log("hello world");
        }
        function jsBaseTest4(){
            //jQuery 数据处理
            const list = ["admin", "manager", "stuff"];
            $.each(list, function (i, item){
                console.log(i + "-" + item);
            })

            //事件处理方式

        }
        function jsBaseTest3(){
            console.log("==== $ =====");
            // console.log(window.jQuery);
            // console.log(window.$);
            // console.log(window.jQuery === window.$);
            const userId = $("#userId");
            console.log(userId.val());
            const inputs = $("input");
            console.log(inputs.length);
            const myInput = $(".aaa");
            console.log(myInput.val());
            const bbbs = $("[name$=z]");
            console.log(bbbs.length);
            const ccc = $("input[name = cbb]");
            console.log(ccc.length);
            console.log($("p, span").length);
            console.log($("div p").length);
            console.log($("[name=aaa]:first-child").length);

            console.log("==== dom 操作====");
            console.log($("#ddd").text());
            console.log($("#ddd").html());
            $("#ddd").html("hello world");

            // $("#ddd").addClass("hello");
            $("#ddd").removeClass("hello")
            // $("#ddd").css("color", "blue");
            $("#ddd").hide(); //show()


            // console.log($("#userId").attr("name", "yourId"));
            $("#userId").attr("name")
            console.log($("userId").removeAttr("name"));
            console.log($("#manRadio").attr("checked"));
            console.log($("#manRadio").prop("checked"));
            console.log($("#manRadio").is(":checked"));
            console.log($(document).width());


            //表单操作
            console.log($("[name = gender]:checked").val());
            $("#userId").val(214);
            console.log($("#userId").val());

            //结构操作
            $("#myDiv").append("<h2>Test2</h2>");
            $("#myDiv").prepend("<h2>Test3</h2>");
            $("#myDiv").remove();

        }
        function jsBaseTest2(){
            console.log("==== 高阶函数 ====");
            const array = [11, 44, 22, 66, 55, 33];
            // console.log(array);
            array.forEach((item) => console.log(item));
            console.log( array.map(item => item + 3));
            console.log(array.reduce((a, b) => a + b));
            console.log(array.filter((item) => item % 2 == 0));
            console.log(array.sort((a, b) => a - b));

            console.log("==== Date ====");
            const date = new Date();
            console.log(date);
            console.log(date.toLocaleDateString());
            console.log(date.getDate());

            console.log("==== 正则表达式 ====");
            const re1 = /^[1-9]\d*$/;
            const re2 = new RegExp(re1);
            console.log(re1.test("Duncan")); //返回 false
            console.log("a b c d e f g".split(/\s+/));
            const line = "全省累计报告新型冠状病毒肺炎确诊病例1332例（其中境外输入741例），累计治愈出院1295例，死亡3例，目前在院隔离治疗34例，403人尚在接受医学隔离。"
            const re3 = /^全省累计报告新型冠状病毒肺炎确诊病例(\d+)例（其中境外输入(\d+)例），累计治愈出院(\d+)例，死亡(\d+)例，目前在院隔离治疗(\d+)例，(\d+)人尚在接受医学隔离。$/;
            console.log(re3.exec(line)) ;

            console.log("==== Json ====");
            //'{"name" : "Duncan", "age" : 18}'
            const personString = '{"name" : "Duncan", "age" : 18}';
            const person = {
                name: "Duncan",
                age:18,
            };
            console.log(JSON.stringify(person));
            console.log(person);
            console.log(JSON.parse(personString));
            console.log(eval("(" + personString +")"));

            console.log("==== 浏览器对象 ====");
            console.log(window.innerWidth + "-" + window.innerHeight);
            console.log(navigator.appName);
            console.log(location.href);
            console.log(document.getElementById("userId").value);


        }
        function jsBaseTest1(){
            console.log("==== 字符串 ====");
            const name = "daxunhua";
            const age = 18;
            console.log(`${name} 今年 ${age}`);
            const hello = "Hello World!"
            console.log(hello.length);
            console.log(hello[1]);
            console.log(hello.toUpperCase());
            console.log(hello.indexOf("l"));
            console.log(hello.substring(0, 4));

            console.log("==== 数组 ====");
            const arr1 = [1, 22.22, 'hello', null, true];
            console.log(arr1);
            const arr2 = new Array(321, 342, null);
            console.log(arr2);
            // console.log([1, 22.22, 'hello', null, true]);
            console.log(arr2.length);
            console.log(arr2[0]);
            arr2[0] = "daxunhua";
            console.log(arr2[0]);
            console.log(arr2.indexOf(342));
            console.log(arr2.slice(0, 1));
            arr2.push("hello");
            console.log(arr2);
            console.log(arr2.sort());
            console.log(arr2.reverse());
            console.log(arr1.concat(arr2));
            console.log(arr1.join("-"));

            console.log("==== 对象 ====");
            const student = {
                name:"duncan",
                age:18,
                roles:["admin", "stuff"],
                hasCard:false,
                zipcode:null,
            };
            console.log(student.hasOwnProperty("age"));
            console.log(student);
            console.log(student.isPrototypeOf("Name"));
            student.age = 19;
            console.log(student.age);
            delete student.hasCard;
            console.log(student);

            console.log("==== Map ====");
            const map = new Map();
            map.set("name","Duncan");
            map.set("age", 18);
            map.set("gender", "male");
            console.log(map);
            console.log(map.get("age"));
            map.delete("age");
            console.log(map);
            console.log("==== Set ====");
            const set = new Set();
            set.add(1);
            set.add(2);
            set.add(3);
            set.add(4);
            set.add(4);
            console.log(set);

            console.log("==== 条件判断 ====");
            const age1 = 30;
            if(age1 < 18){
                console.log("儿童");
            } else if(age >= 18 && age < 40){
                console.log("青壮年")
            } else if(age1 >= 40){
                console.log("中老年");
            }

            console.log("==== 循环 ====");
            for(let i = 0; i < arr1.length; i++){
                console.log(arr1[i]);
            }
            for(const item in arr2){
                console.log(item);
                console.log(arr2[item])
            }
            for(const key in student){
                console.log(key + "------" + student.key);
            }
            let start = 0;
            const  end = 100;
            while(start < end){
                console.log(start);
                start++;
            }
            do{
                console.log(start);
                start++;
            }while(start < end);
            for(let item of arr2){
                console.log(item);
            }
            for(let item of map){
                console.log(item);
            }
            for(let item of set){
                console.log(item);
            }
            arr2.forEach(function (item){
                console.log(item);
            });
            map.forEach(function (value, key, map){
                console.log(value + "-" + key + "-" + map);
            });
            set.forEach(function (item, element, set){
                console.log(item + "-" +element);
            });
        }
    </script>
</body>
</html>